<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>音乐播放器</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
*{ margin:0; padding:0;}
body{width: 100%;height: 100%; background:url(img/detailsBg.jpg) no-repeat; background-size:cover; }
/* position:relative; */
#main{ margin:0 auto;}
#title{ height:40px; background:#09C; font-size:22px; line-height:40px; text-align:center; color:white;}
#title span{ font-size:14px;}
#audio{ height:150px; position:absolute; bottom:0; width:100%;}
#audio .audioAll{ width:200px; margin:20px auto; position:relative;}
#audio .audioPro{ width:100%; height:2px; background:white;}
#audio .audioProUp{ width:0%; height:2px; background:#29abe2; position:absolute; left:0; top:0;}
#audio .audioProBar{ width:15px; height:15px; background:#29abe2; border-radius:50%; position:absolute; left:0%; top:0; margin:-7px;}
#audio .nowTime{ font-size:12px; color:#b3b3b3; position:absolute; top:-8px; left:-40px;}
#audio .allTime{ font-size:12px; color:#b3b3b3; position:absolute; top:-8px; right:-40px;}
#audio .play{ width:55px; height:55px; background:url(img/details_play.png) no-repeat; background-size:cover; position:absolute; left:50%; margin-left:-27px; top:30px;}
#audio .prev{ width:37px; height:37px; background:url(img/details_prev.png) no-repeat; background-size:cover; position:absolute; left:10px; top:37px;}
#audio .next{ width:37px; height:37px; background:url(img/details_next.png) no-repeat; background-size:cover; position:absolute; right:10px; top:37px;}

#lyric{ width:100%; position:absolute; top:100px; bottom:150px; overflow:hidden;}
#lyric ul{ width:100%; text-align:center; color:white; font-size:14px; position:absolute; top:0; left:0; transition:.2s; -webkit-transition:.2s;}
#lyric li{ margin-top:15px;}
#lyric li.active{ color:#00ffff;}
</style>
<script src="jquery-2.1.3.min.js"></script>
</head>

<body>
<div id="main">
	<div id="title">
    	<!--小幸运 <span>田馥甄</span>-->
    </div>
    <div id="lyric">
    	<ul id="lyricUl">
        	<!--<li>歌词测试文字</li>-->
        </ul>
    </div>
    <div id="audio">
    	<div class="audioAll">
            <div class="audioPro">
                <div id="audioProUp" class="audioProUp"></div>
                <div id="audioProBar" class="audioProBar"></div>
            </div>
            <div id="nowTime" class="nowTime">00:00</div>
            <div id="allTime" class="allTime">00:00</div>
            <div id="play" class="play"></div>
            <div id="prev" class="prev"></div>
            <div id="next" class="next"></div>
        </div>
    </div>
</div>
<audio id="a1" autoplay></audio>
<script>

var sAudio = '';
var sMusicName = '';
var sName = '';
var sLyric = '';
var sNextId = '';
var sPrevId = '';

var $title = $('#title');

var lyricArr = [];
var $lyricUl = $('#lyricUl');
var $lyricLi = null;
var iLyricLiH = 0;

var oA = $('#a1').get(0);
var $nowTime = $('#nowTime');
var $allTime = $('#allTime');
var $play = $('#play');
var $prev = $('#prev');
var $next = $('#next');

var timer = null;
var scale = 0;
var $audioProUp = $('#audioProUp');
var $audioProBar = $('#audioProBar');
var disX = 0;
var proBarWidth = $audioProBar.parent().innerWidth();
var onoff = true;

loadMusic(190690);
bindAudio();

function loadMusic(id){   //加载音乐
	nextRestore();
	$.ajax({
		url : 'http://musicapi.duapp.com/api.php?type=url',
		data:{id:id},
		success : function(data){
			console.log(data)
			getData(data);
		}
	});
	$.ajax({
		url : 'https://api.imjad.cn/cloudmusic/?type=detail',
		data:{id:id},
		success : function(data){
			console.log(data)
			MusicName(data);
		}
	});
	$.ajax({
		url : 'https://api.imjad.cn/cloudmusic/?type=lyric',
		data:{id:id},
		success : function(data){
			console.log(data)
			Lyric(data);
		}
	});

}

function getData(data){   //收集数据

	sAudio = data.data[0].url;
	sNextId = data.data[0].id;
	sPrevId = data.data[0].id;
	
	showTitle(sMusicName,sName);	
	showLyric(sLyric);	
	showAudio(sAudio);
}
function MusicName(name){
	sMusicName = name.songs[0].name;
	sName = name.songs[0].ar[0].name;
}
function Lyric(lyric){
	sLyric = lyric.lrc.lyric;
}

function showTitle(sMusicName,sName){   //显示title部分
	$title.html( sMusicName + ' <span>'+ sName +'</span>' );
}

function showLyric(sLyric){   //显示歌词部分

	//console.log(sLyric);

	var re = /\[[^[]+/g;

	lyricArr = sLyric.match(re);
	for(var i=0;i<lyricArr.length;i++){
		lyricArr[i] = [ formatTime2(lyricArr[i].substring(0,10)) , lyricArr[i].substring(10).trim() ];
	}

	for(var i=0;i<lyricArr.length;i++){
		$lyricUl.append( '<li>'+ lyricArr[i][1].replace("]","").replace("[","") +'</li>' );
	}

	$lyricLi = $lyricUl.find('li');
	
	$lyricLi.first().attr('class','active');

	iLyricLiH = $lyricLi.first().outerHeight(true);

}

function showAudio(sAudio){    //显示播放数据
	oA.src = sAudio;
	oA.load();
	
	if(onoff){
		audioPlay();
	}
	/*获取总时长*/
	$(oA).on('canplaythrough',function(){
		
		//console.log( oA.duration );
		
		$allTime.html( formatTime(oA.duration) );
		
	});
	
	$(oA).on('ended',function(){
		
		loadMusic(sNextId);
		
	});

}

function nextRestore(){   //还原初始状态

	arr = [];
	$lyricUl.css('transform','translateY(0)');
	$lyricUl.empty();
	$audioProUp.css('width',0);
	$audioProBar.css('left',0);
	
}

function bindAudio(){   //播放器的事件操作

	/*暂停&播放*/
	$play.on('click',function(){
		
		if(oA.paused){
			audioPlay();
		}
		else{
			audioPause();
		}
		
	});
	
	/*拖动进度条*/
	$audioProBar.on('mousedown touchstart',function(ev){
		//console.log(ev.originalEvent.targetTouches[0].pageX)
		var This = this;
		var pageX = ev.pageX || ev.originalEvent.targetTouches[0].pageX 
		disX = pageX - $(this).position().left;
		
		clearInterval(timer);
		 
		$(document).on('mousemove.move touchmove.move',function(ev){
			var pageXs = ev.pageX || ev.originalEvent.targetTouches[0].pageX
			var L = pageXs - disX;
			if(L < 0){
				L = 0;
			}
			else if(L > proBarWidth){
				L = proBarWidth;
			}
			audioPlaying();
			scale = L / proBarWidth;
			$(This).css('left' , L );
			
		});
		$(document).on('mouseup.move touchend.move',function(ev){
			
			$(this).off('.move');
			
			oA.currentTime = scale * oA.duration;
			
			audioPlaying();
			clearInterval(timer);
			timer = setInterval(audioPlaying,1000);
			
		});
		return false;
	});
	
	/*下一曲*/
	$next.on('click',function(){
		
		loadMusic(sNextId);
		
	});
	/*上一曲*/
	$prev.on('click',function(){
		
		loadMusic(sPrevId);
		
	});

}

function audioPlay(){   //播放音乐
	
	onoff = false;
	
	$play.css('backgroundImage','url(img/details_pause.png)');
	oA.play();
	
	audioPlaying();
	clearInterval(timer);
	timer = setInterval(audioPlaying,1000);
	
}

function audioPause(){   //暂停音乐

	onoff = true;

	$play.css('backgroundImage','url(img/details_play.png)');
	oA.pause();
	clearInterval(timer);
}

function audioPlaying(){   //播放进行中

	$nowTime.html( formatTime(oA.currentTime) );	
	
	scale = oA.currentTime / oA.duration;
	
	$audioProBar.css('left', scale * 100 + '%' );
	$audioProUp.css('width', scale * 100 + '%' );

	scrollLyric();	
	
}

function scrollLyric(){   //滚动歌词

	var ct = oA.currentTime;
	
	for(var i=0;i<lyricArr.length;i++){
		
		if(i == lyricArr.length-1 && ct > lyricArr[i][0]){
			$lyricLi.eq(i).attr('class','active').siblings().attr('class','');
			$lyricUl.css('transform','translateY('+ - iLyricLiH * (i-3) +'px)');
		}
		else if( ct > lyricArr[i][0] && ct < lyricArr[i+1][0] ){
			
			$lyricLi.eq(i).attr('class','active').siblings().attr('class','');
			if(i>3){
				
				$lyricUl.css('transform','translateY('+ - iLyricLiH * (i-3) +'px)');
				
			}
			
		}
		
	}

}

function formatTime(num){   //格式化时间

	num = Math.floor(num);
	
	var iM = Math.floor(num%3600/60);
	var iS = Math.floor(num%60);
	
	return toZero(iM) + ':' + toZero(iS);

}

function formatTime2(time){   //格式化时间

	time = time.substring(1,time.length-1);
	
	var arr = time.split(':');
	
	return (parseFloat(arr[0])*60 + parseFloat(arr[1])).toFixed(2);
 	
}

function toZero(num){
	if(num<10){
		return '0' + num;
	}
	else{
		return '' + num;
	}  //时间+0
}

</script>

</body>
</html>
